<template>
  <XMGameDetailHeader :gameDetail="data" />
  <XMGameDetailPlay
    :gameDetail="data"
    :gameId="gameId"
  />
  <XMAd :gamDefineSlot="gamConfig?.detailDisplay1" />
  <XMTitle title="Games" />
  <XMListCard :gameJson="moreGameJson" />
  <XMAd :gamDefineSlot="gamConfig?.detailDisplay2" />
  <XMTitle title="Game Categories" />
  <XMCategory showMore />
</template>

<script setup lang="ts">
import { useConfigStore } from "~/composables/useConfigStore";
import { useGA } from "~/composables/useGA";

const { gameId } = useRoute().query;
const { config, hostName } = useConfigStore();
const { gamConfig } = config.value;
const { trackEvent } = useGA();
/** 获取游戏详情数据 */
const { data } = await useFetch<GameJson>("/api/getGameApi", {
  method: "POST",
  body: { hostName, gameId },
});
const { name } = data.value || {};
/** 获取该游戏详情类似的48个游戏 */
const { data: moreGameJson } = await useFetch<GameJson>("/api/getRandomGameByGame", {
  method: "POST",
  body: { hostName, gameId },
});

trackEvent({
  eventName: "Detail_Page_Show",
  params: {
    Game: name,
  },
});
</script>

<style scoped></style>
